<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <!-- 引入 ElementPlus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        /* 给id为app的容器添加样式 */
        #app {
            min-height: 100vh; /* 使容器至少占满视口高度 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 子元素垂直排列 */
            justify-content: center; /* 垂直方向居中 */
            align-items: center; /* 水平方向居中 */
        }

        div {
            margin-bottom: 10px; /* 每个div之间添加一些间距 */
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>用户信息</h1>
        <div>
            <label>名称:</label>
            <input v-model="user.name" />
        </div>
        <div>
            <label>年龄:</label>
            <input v-model.number="user.age" />
        </div>
        <div>
            <label>地址:</label><br />
            <input v-model="user.address.province" /><br />
            <input v-model="user.address.city" /><br />
            <input v-model="user.address.street" />
        </div>
        <div>
            <p>您的信息:</p>
            <p>{{ user.name }} ({{ user.age }})岁</p>
            <p>
                {{ user.address.province }}, 
                {{ user.address.city }}, 
                {{ user.address.street }}
            </p>
        </div>
    </div>
    <script>
        const App = {
            data() {
                return {
                    user: {
                        name: '张三',
                        age: 18,
                        address: {
                            province: '浙江省',
                            city: '金华市',
                            street: ''
                        }
                    }
                };
            },
            watch: {
                'user.name': function (newName, oldName) {
                    console.log(`名称从 ${oldName} 变更为 ${newName}`);
                },
                'user.age': function (newAge, oldAge) {
                    console.log(`年龄从 ${oldAge} 变更为 ${newAge}`);
                    if (newAge < 0) {
                        alert("年龄不能为负数！");
                        this.user.age = 0;
                    }
                },
                user: {
                    handler(newUser, oldUser) {
                        console.log("用户信息发生变化:");
                        console.log("新值:", newUser);
                        console.log("旧值:", oldUser);
                    },
                    deep: true
                }
            }
        };

        Vue.createApp(App).mount("#app");
    </script>
</body>

</html>    